<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>hello world</title>
    <script src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>hello world</h1>
    <hr/>
    <div id="app">
        {{count}}
        <ul>
            <li v-for='item in arr'>{{item}}</li>
        </ul>
        <div>{{obj}}</div>
    </div>
    <button onclick="add();">add</button>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                count: 10,
                arr: ['aaa','bbb','ccc'],
                obj: {}
            }
        });

/**
app.count++;
app.arr[1] = 'ddd'
这2局连着使用会有效果.因为app.count++更新了虚拟dom
但是直接使用
app.arr[1] = 'ddd'
不会有效果,由于javascript的限制

使用全局set
Vue.set(app.arr,1,'dddddddddddd');
在需要通过数组下标改变数组值的时候,使用Vue.set

还可以使用Vue.set来新增对象的属性.
但是不能改根对象的属性,这里必须要先挂载一个'obj',不能直接改data的属性
*/
        function add(){
            // app.count++;
            // app.arr[1] = 'ddd'
            Vue.set(app.arr,1,'dddddddddddd');
            Vue.set(app.obj,'name','小明')
        }
    </script>

</body>
</html>